<script setup>
import { ref } from 'vue'
import dailiydata from '../../data/CharacterDailyData.json'
import { getText } from '../../store/txtstore'

const props = defineProps(['ids'])
const logs = []
const nums = []
for (const i of props.ids) {
    logs.push(getText(dailiydata.data[i][7][1]))
    nums.push(getText(dailiydata.data[i][5][1]))
}
const logNum = ref(0)
</script>

<template>
    <div>
        <article>
            <h2><span>{{ String(logNum + 1).padStart(2, '0') }}</span> | {{ nums[logNum] }}</h2>
            <pre v-html="logs[logNum]"></pre>
        </article>
        <nav>
            <ul>
                <li v-for="(num, idx) of nums">
                    <label><input type="radio" :value="idx" v-model="logNum">{{ num }}</label>
                </li>
            </ul>
        </nav>
    </div>
</template>

<style scoped>
div {
    display: grid;
    grid-template-areas:
        "n"
        "a";
}

article {
    grid-area: a;
}

h2 {
    border-bottom: 1px solid gray;
    padding: 0.5em 0;
}

pre {
    font: inherit;
    padding: 0.5em 0;
    white-space: pre-wrap;
}

h2 span {
    color: #5b91a6;
}

nav {
    grid-area: n;
}

ul {
    column-gap: 1em;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0.5em 0;
    padding: 0;
}

@media (min-width: 1024px) {
    div {
        grid-template-areas: "a n";
    }

    ul {
        display: block;
        padding-inline-start: 40px;
    }
}
</style>